<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String wsPath=  request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>优聊一下</title>

<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/chat.css" />
<link rel="stylesheet" type="text/css" href="css/chat-footer.css" />
<link rel="stylesheet" type="text/css" href="css/help-order.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script>
$(document).bind('mobileinit',function(){
 $.mobile.changePage.defaults.changeHash = false;
 $.mobile.hashListeningEnabled = false;
 $.mobile.pushStateEnabled = false;
});
</script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" style="background:#eee;">
	<div data-role="header" id="header">
		<img src="${thingImage }"/>
		<div class="order-details">
			<h3><fmt:formatNumber value="${thing.cost}" type="currency" pattern="￥" /></h3>
			<p>交易前聊一聊</p>
		</div>
		<c:if test="${(cg.thing.user.id eq fUser.id)?true:false}">
      		<input type="button" data-role="none" value="确认下单" />
		</c:if>
		
 	</div>
 	<div data-role="content" id="content">
 	<c:forEach items="${cList}" var="chat" varStatus="stuts">
 		<c:choose> 
           <c:when test="${chat.user.id eq fUser.id  }">
				<div class="rightd">
					<div class="rightimg"> 
						<img src="${fUser.headimgurl }" />
					</div>
					<div class="speech right" >${chat.message }</div>
				</div>
           </c:when>  
           <c:otherwise>
           		<div class="leftd">
					<div class="leftimg"> 
						<img src="${tUser.headimgurl }" />
					</div>
					<div class="speech left" >${chat.message }</div>
				</div>
           </c:otherwise>  
  
        </c:choose> 
 	</c:forEach>
 	</div>

 	<div data-role="footer" id="footer" style="left: 0;right: 0;bottom:0;position: fixed;z-index: 1000;">
 		<input class="text" type="text" placeholder="想对TA说点什么？" data-role="none"/>
 		<input class="btn" type="button" value="发送" data-role="none"/>
 		<img src="images/smile.png" />
 	</div>
 </div>
</body>
<script>
	$(function(){
		$(".btn").click(function(){
			sendMsg();
		});
		
		//socket
		var path = '<%=wsPath%>';
		//socket是否可用
		var isEnable = false;
		var websocket;
		if ('WebSocket' in window) {
			websocket = new WebSocket("ws://" + path + "/ws/chat");
		}
		websocket.onopen = function(event) {
			console.log("WebSocket:已连接");
			occupy();
		};
		//socket占用
		function occupy(){
			$.post("api/chat/occupy.do",{useUserid:'${fUser.id}',toUserid:'${tUser.id}',usage:'group:${ChatGroup.id}thing:${thing.id}'},function(data){
				isEnable = true;
			},'json');
		}
		websocket.onmessage = function(event) {
			if(isEnable==false){
				return ;
			}
			var data=JSON.parse(event.data);
			console.log("WebSocket:收到一条消息",data);
			var html = "";
			var input = $(".text");
			html += "<div class='leftd'>";
			html += "<div class='leftimg'>";
			html += "<img src='"+data.img+"' />";
			html += "</div>";
			html += "<div class='speech left' >"+data.msg+"</div>";
			html += "</div>";
			$("#content").append(html);
			scrollToBottom();
		};
		websocket.onerror = function(event) {
			console.log("WebSocket:发生错误 ");
			console.log(event);
		};
		websocket.onclose = function(event) {
			console.log("WebSocket:已关闭");
			console.log(event);
		}
		//发送消息
		function sendMsg(){
			if(isEnable==false){
				return ;
			}
				var v=$(".text").val();
				if(v==""){
					return;
				}else{
					var data={};
					data["from"]='${fUser.id}';
					data["to"]='${tUser.id}';
					data["msg"]= v;
					data["chatGroupId"] = '${ChatGroup.id}';
					data["chatMessageType"] = 0;
					data["usage"]= 'group:${ChatGroup.id}thing:${thing.id}';
					websocket.send(JSON.stringify(data));
					//本地
					var html = "";
					html += "<div class='rightd'>";
					html += "<div class='rightimg'> ";
					html += "<img src='${fUser.headimgurl }' />";
					html += "</div>";
					html += "<div class='speech right' >"+v+"</div>";
					html += "</div>";
					$("#content").append(html);
					$(".text").val("");
					scrollToBottom();
				}
			}
		//滚动屏幕
		function scrollToBottom(){
			 var h = $(document).height()-$(window).height();
			  $(document).scrollTop(h);
		}
	});
	
	$(document).ready(function(){
		$('.btn').trigger("click");
	});
</script> 
</html>